Zooming and Panning

To enable zooming on a chart, set the Chart.ZoomMode property. You can constrain the user to zooming along only one axis (Horizontal or Vertical ZoomMode), or allow the user to zoom in on any part of the chart (Both ZoomMode).

CopyEnabling arbitrary zooming

<ms:Chart ZoomMode="Both" />

When zooming is enabled, users can zoom by dragging the mouse over the area they want to zoom into, or by using the mouse wheel. A drag in progress can be cancelled by pressing the Esc key. The mouse wheel can be used to zoom out.

Once the chart is zoomed in, users can pan by holding down the Ctrl key and dragging the mouse.

Customizing the Zoom Marquee

When the user drags the mouse to zoom, the chart displays a marquee showing the target zoom area. To customize the appearance of the marquee, use the ZoomBoxStyle property. The target type of the style should be Rectangle.

CopyCustomizing the zoom marquee

<ms:Chart Width="600" Height="400" LegendPosition="Top" ZoomMode="Both">
  <ms:Chart.ZoomBoxStyle>
    <Style TargetType="Rectangle">
      <Setter Property="Stroke" Value="Gray" />
      <Setter Property="StrokeThickness" Value="1" />
      <Setter Property="Fill" Value="#40000000" />
    </Style>
  </ms:Chart.ZoomBoxStyle>
</ms:Chart>

Tick Marks and Zooming and Panning

The behavior of tick marks and labels on a chart axis during zooming and panning is determined by the TickMarkMode property of the ChartAxis.

If TickMarkMode is Stationary, then the tick marks and labels stay in the same place on the display, and the label values change as the user zooms and pans.

If TickMarkMode is Movable, then the tick marks and labels stay at the same values, and move along the axis as the user zooms and pans.

Programmatic Zooming and Panning

You can use the ChartAxis ActualMinimum and ActualMaximum properties to zoom in on a part of the range.